<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册页面</title>
    <script type="text/javascript">
        /**
         * 需求：用户点击校正按钮，要获取输出狂中的的内容，然后验证其是否合法
         * 验证规则是：必须有字母，数字，下划线构成，并且长度为5-12位
         * */
        function onclickfun(){
            //1.操作一个标签一定要获取这个标签的对象
            var usernameObj=document.getElementById("username");
            //alert(usernameObj);
            //如何验证字符串，符合某个规则，需要使用正则表达式技术
            var usernameText=usernameObj.value;
            var patt=/^\w{5,12}$/;
            /**
             * test()发布放大用于测试某个字符串，是不是匹配规则
             * 匹配就返回true，不匹配就返回false
             * */

            var usernameSpanObj=document.getElementById("usernameSpan");
            //innerHTML  表示起始标签和接受标签中的内容
            //innerHTML  这个属性可读，可写
            usernameSpanObj.innerHTML="验证成功";
            if(patt.test(usernameText)){
                //alert("用户名合法");
                usernameSpanObj.innerHTML="用户名合法";
                usernameSpanObj.innerHTML="用户名合法";
                usernameSpanObj.innerHTML="<img src=\"true.png\" width=\"18\">";
            }else {
                //alert("用户名不合法");
                usernameSpanObj.innerHTML="用户名不合法";
            }
        }
        function  onclickfun1(){
            var telephoneObj=document.getElementById("telephoneSpan");
            var telephoneText=telephoneObj.value;
            var patt=/^\w{5,12}$/;
            var telephoneSpanObj=document.getElementById("telephoneSpan");
            if(patt.test(telephoneText)){
                telephoneSpanObj.innerHTML="格式正确";
                telephoneSpanObj.innerHTML="<img src=\"true.png\" width=\"18\">";
            }else {
                telephoneSpanObj.innerHTML="格式不正确";
            }
        }

    </script>
</head>
<body>

      <div>
           <form >
               <h3>信息登录</h3>
               <table align="left">

                   姓名：<input type="text"   id="username"/>
                   <span id="usernameSpan" style="color: red;"></span>
                   <button onclick="onclickfun()">校验</button>
                   <br/>
                   电话：<input type="text" id="telephone"/>
                   <span id="telephoneSpan" style="color: red;"></span>
                   <button onclick="onclickfun1()">校验</button>
                   <br/>
                   性别：<input type="radio"  id="sex">男<input type="radio" name="sex" checked="checked"/>女<br/>
                   技能：<span class="professional">
                Java<input type="checkbox" name="professional">
                Html<input type="checkbox" name="professional">
                Css<input type="checkbox" name="professional">
                <br/>
                JavaScript<input type="checkbox" name="professional">
                Mysql<input type="checkbox" name="professional">
                Maven<input type="checkbox" name="professional">
                其他<input type="checkbox" name="professional">
             </span></p>
                   <br/>
                   最高学历：
                   <select id="setobj";>
                       <option>--专科--</option>
                       <option>本科</option>
                       <option>硕士</option>
                       <option>博士</option>
                   </select>
                   <br/>
                   自我评价:
                   <div class="kong">
                    <textarea name="meno" style="width: 80px;height: 40px;">
                    </textarea>
                   </div>
                   <button type="submit">提交</button>
               </table>
           </form>
       </div>


</body>
</html>